<!--
vertical-align
    - middle        父元素中部
    - baseline      父元素基线（默认值）
    - top           行中最高元素顶端作为水平线，其它元素顶端和它对齐
    - bottom        行中最低元素底部作为水平线，其它元素底部和它对齐
1）垂直对齐方式
2）是给行内元素、行内块元素使用的，一般不对块级元素使用
3）图片、文本域、表格单元格等行内块，默认是基线baseline对齐，而普通文字不是！

注意：
    vertical-align属性一般是给图片、文本域、表格单元格等【行内块元素】设置的；
    其它模式的元素一般需要先转为行内块元素后再设置；
    即使是i、em、span等行内元素，一般也会先转为行内块再设置。


图片底部留白间隙问题
    - 默认在图片底侧会有空白间隙，是因为行内块元素是baseline基线对齐，
    - 基线baseline和底部bottom之间的距离就是这个空白间隙
    - 将图片放到盒子中，盒子设置边框，但不设高度，【旁边有文字】，才可以看到间隙
    - 补充一点：不知为啥，图片【旁边没有文字】时，自己测试是没有底部留白的，但视频中的会有，可能是浏览器问题吧！
解决
    方法1：除了baseline以外，设置为middle、top、bottom都能解决
    方法2：转为块级元素display:block;，因为块级元素没有vertical-align属性，也就意味着没有baseline基线问题。
    推荐方法1，因为方法2可能会导致布局出现问题，毕竟独占一行！
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        background-color: cyan;
    }
    span {
        background-color: red;
    }
    textarea {
        vertical-align: bottom;
    }
    .pic {
        vertical-align: top;
    }
    .test {
        margin-top: 20px;
        border: 5px solid red;
    }
</style>

<!--
以下案例中
    所有元素的最低处：字母【j】【p】的尾巴下面
    所有元素的最高处：文本域的顶部
-->
<div class="box">
    <span>标签pppfff的内容</span>
    <textarea name="" id="" cols="10" rows="5"></textarea>
    普通文字jjjfff
    <img class="pic" src="./resources/pictures/item.png" height="50px" alt="">
</div>

<!-- 行内块空白间隙 -->
<div class="test">
    <img src="./resources/pictures/item.png" alt="">hello
</div>